<template>
    <div class="qilin-knowledge">
        <QilinCard :cardConfig="{title:'render函数的使用'}">
            <div>
                <!-- <QilinInput></QilinInput> -->
                <test01></test01>
                <test02>
                    <!-- 场景一 -->
                    <template v-slot:h1><div>h1</div></template>
                    <template v-slot:h2><div>h2</div></template>
                    <template v-slot:h3><div>h3</div></template>
                    <!-- 场景二 -->
                    <!-- <template v-slot:h1="props">{{props.text}}</template>
                    <template v-slot:h2="props">{{props.text}}</template>
                    <template v-slot:h3="props">{{props.text}}</template> -->
                    <!-- 场景五 -->
                    <!-- <template v-slot:slot1="props">
                        {{props.text}}
                    </template> -->
                </test02>
            </div>
        </QilinCard>
        <QilinCard :cardConfig="{title:'project和inject函数'}">
            <div>
                <p>provide传的值：{{this.getRole}}</p>
                <p>inject从父组件接收到的值：{{this.getRole}}</p>
                <p>inject从祖组件接收到的值：{{this.getName}}</p>
            </div>
        </QilinCard>
        <QilinCard :cardConfig="{title:'Vue的自定义指令'}">
            <div>
                <p>当前的值是：<span v-text="num"></span></p>
                <p>放大十倍的值是：<span v-big="num"></span></p>
                <el-button @click="num++" size="mini" type="primary">点我+1</el-button>
                <input type="text" :value="num"></input>
                <input type="text" v-sbind:value.a.b="num"></input>
            </div>
        </QilinCard>
        <QilinCard :cardConfig="{title:'Vue的observable方法'}">
            <div>
                <el-button size="mini" type="primary" @click="setCount(testCount + 1 )">点击+1</el-button>
                <el-button size="mini" type="primary" @click="setCount(testCount - 1 )">点击-1</el-button>
                <test></test>
                <p>展示效果：{{testCount}}</p>
            </div>
        </QilinCard>
        <QilinCard :cardConfig="{title:'Vue的Mixin方法'}">
            <div>
                <p>当前mixins中的number值为：{{number}}</p>
                <el-button type="primary" size="mini" @click="number++">点我+1</el-button>
                <el-button type="primary" size="mini" @click="number--">点我-1</el-button>
            </div>
        </QilinCard>   
    </div>
</template>
<script>
import qilinx from "@/api/QilinX/request.js";
import { store, mutation } from "@/store/observable.js";
import mixins from "@/store/mixins.js";
import Vue from "vue";
// Vue.directive("sbind",(el,binding)=>{
//     console.log(el,binding);
// });
// Vue.directive("sbind",{
//     bind(el,bindding){
//         // console.log(11);
//         console.log(el,bindding);
//     },
//     inserted(el,bindding){
//         console.log(22);
//     },
//     update(el,bindding){
//         console.log(33);
//     },
//     componentUpdated(el,bindding){
//         console.log(44);
//     },
//     unbind(el,bindding){
//         console.log(55);
//     }
// })
import QilinCard from "@/components/QilinCard.vue";
import QilinCollapse from "@/components//QilinCollapse.vue";
import QilinInput from "@/components/renderComponents/QilinInput.vue";
import test01 from "@/components/renderComponents/test01.vue";
// import test01 from "@/components/renderComponents/test01.js";
import test02 from "@/components/renderComponents/test02.vue";
export default {
    inject:{
        getRole:"isManager",
        getName:"name"
    },
    mixins:[mixins],
    components: {
        test: {
            template: `
                <div style="background-color:cyan;padding:20px;">
                    test父组件
                    <bb></bb>
                </div>
            `,
            components: {
                bb: {
                    template: `
                        <div style="padding-left:20px;background-color:orange;">
                            bb子组件：{{testCount}}
                        </div>
                    `,
                    computed: {
                        testCount() {
                            return store.count;
                        },
                    },
                },
            },
        },
        QilinCard,
        QilinCollapse,
        QilinInput,
        test01,
        test02
    },
    data() {
        return {
            num: 10,
        };
    },
    directives: {
        big(element, bindding) {
            element.innerText = bindding.value * 10;
        },
        // sbind(element,bindding){
        //     console.log(element,bindding);
        //     element.value=bindding.value;
        //     element.focus();
        // }
        sbind: {
            bind(el, bindding) {
                // console.log(11);
                // console.log(el,bindding);
            },
            inserted(el, bindding) {
                // console.log(22);
            },
            update(el, bindding) {
                // console.log(33);
            },
            componentUpdated(el, bindding) {
                // console.log(44);
            },
            unbind(el, bindding) {
                // console.log(55);
            },
        },
    },
    computed: {
        testCount() {
            return store.count;
        },
    },
    methods: {
        setCount: mutation.setCount,
    },
    mounted(){
        // console.log(this.getRole);
    }
};
</script>
<style lang="less" scoped>
.qilin-knowledge {
    width: 100%;
    padding:0 10px 40px;
    .el-card {
        margin-bottom: 20px;
        .el-card-content {
            .el-button {
                margin-bottom: 5px;
            }
            .el-input {
                margin-bottom: 5px;
            }
            input {
                margin: 0 5px;
                padding: 2px;
                &:active {
                    padding: 2px;
                }
            }
        }
    }
}
</style>